<template>
	<el-container>
		<el-header>
			<div class="left-panel"> </div>
			<div class="right-panel">
				<el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
				<el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
				<el-button text type="primary" @click="showCondition = !showCondition">
					<span v-if="!showCondition">展开</span>
					<span v-else>收起</span>
					<vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
				</el-button>
			</div>
		</el-header>
		<el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="对账时间" label-width="100px" >
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.times"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
							:default-time="defaultTime"
                        />
                    </el-form-item>
					<el-form-item label="对账申请日期" label-width="100px" >
					    <el-date-picker
					        style="width: 300px"
					        v-model="queryList.CreateTimes"
					        type="datetimerange"
					        value-format="YYYY-MM-DD HH:mm:ss"
					        format="YYYY-MM-DD HH:mm:ss"
					        range-separator="-"
					        unlink-panels="true"
					        start-placeholder="开始时间"
					        end-placeholder="结束时间"
							:default-time="defaultTime"
					    />
					</el-form-item>
                    <el-form-item label="对账申请编号" label-width="100px" >
                        <el-input
                            placeholder="---请输入对账申请编号---"
                            v-model="queryList.storageOrderAccountCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="单据编号" label-width="100px" v-if="orgType == 1">
                        <el-input
                            placeholder="---请输入单据编号---"
                            v-model="queryList.StorageOrderCode"
                            style="width: 300px"
                        />
                    </el-form-item>
					<el-form-item label="供应商" label-width="100px" v-if="orgType == 1">
					    <el-input
					        placeholder="---请输入供应商名称---"
					        v-model="queryList.supplierName"
					        style="width: 300px"
					    />
					</el-form-item>
					<!-- <el-form-item label="订单编号" label-width="100px" v-if="orgType == 2">
                        <el-input
                            placeholder="---请输入订单编号---"
                            v-model="queryList.purchaseOrderCode"
                            style="width: 300px"
                        />
                    </el-form-item> -->

					<el-form-item label="订单编号" label-width="100px">
                        <el-input
                            placeholder="---请输入订单编号---"
                            v-model="queryList.purchaseOrderCode"
                            style="width: 300px"
                        />
                    </el-form-item>

					<el-form-item label="门店" label-width="100px" v-if="orgType == 3">
                        <el-input
                            placeholder="---请输入门店名称---"
                            v-model="queryList.StoreName"
                            style="width: 300px"
                        />
                    </el-form-item>
					<el-form-item label="订单类型" label-width="100px">
						<el-select placeholder="---请选择订单类型---" v-model="queryList.StorageOrderType"
							style="width: 300px">
							<el-option label="---请选择订单类型---" value />
							<el-option v-for="item in storeOrderTypeList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>

                    <!-- <el-form-item label="采购单价" label-width="100px">
                        <el-input
                            placeholder="---请输入供应商名称---"
                            v-model="queryList.supplierName"
                            style="width: 300px"
                        />
                    </el-form-item>   -->
				<!-- 	<el-form-item label="类型" label-width="100px" v-if="orgType == 1">
                        <el-input
                            placeholder="---请输入供应商名称---"
                            v-model="queryList.supplierName"
                            style="width: 300px"
                        />
                    </el-form-item> -->
					<el-form-item label="物料简码" label-width="100px">
                        <el-input
                            placeholder="---请输入物料简码---"
                            v-model="queryList.MaterialSimpCode"
                            style="width: 300px"
                        />
                    </el-form-item>
					<el-form-item label="物料编号" label-width="100px">
                        <el-input
                            placeholder="---请输入物料编号---"
                            v-model="queryList.MaterialCode"
                            style="width: 300px"
                        />
                    </el-form-item>
					<el-form-item label="物料分类" label-width="100px">
                        <el-tree-select
						placeholder="---请选择物料分类---"
                            v-model="queryList.MaterialTypeIds"
                            :props="{ label: 'label', value:'value',children: 'children' }"
                            :data="materialTypeTree"
                            multiple
                            :render-after-expand="false"
                            show-checkbox
                            style="width: 300px"
                        />
                    </el-form-item>
					<el-form-item label="物料名称" label-width="100px">
                        <el-input
                            placeholder="---请输入物料名称---"
                            v-model="queryList.MaterialName"
                            style="width: 300px"
                        />
                    </el-form-item>
					<el-form-item label="规格型号" label-width="100px">
                        <el-input
                            placeholder="---请输入规格型号---"
                            v-model="queryList.MaterialSpecs"
                            style="width: 300px"
                        />
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>
		<!-- 酒业 -->
		<el-main class="nopadding" v-if="orgType == 1">
			<scTable ref="mytable" :span-method="objectSpanMethod" border :queryType="'storage-order-account/checkResult'"
				:data="listData" :queryList="queryList" :column="columnList" :orderList="OrderList"
				:sort-orders="['ascending', 'descending']" @selection-change="selectionChange"
				row-key="ReceivingOrderId" key="ReceivingOrderId"  :row-class-name="setRowClass" show-summary remoteSummary>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="序号" type="index" width="80"></el-table-column>
				<el-table-column label="对账申请编号" prop="storageOrderAccountCode" width="200" sortable></el-table-column>
				<el-table-column label="对账时间" prop="accountStartDate" width="200" sortable>
					<!-- <template #default="scope">
						<div>{{ scope.row.accountStartDate }} - {{ scope.row.accountEndDate }}</div>
					</template> -->
					<template #default="scope">
						{{scope.row.accountStartDate? scope.row.accountStartDate.slice(0, 10):scope.row.accountStartDate}}
						{{'-'}}
						{{scope.row.accountEndDate? scope.row.accountEndDate.slice(0, 10):scope.row.accountEndDate}}
					</template>
				</el-table-column>
				<el-table-column label="对账申请日期" prop="createTime" width="200" sortable></el-table-column>
				<el-table-column label="单据编号" prop="storageOrderCode" width="200" sortable></el-table-column>
				<el-table-column label="供应商" prop="supplierFullName" width="150" sortable></el-table-column>
				<el-table-column label="对账单位" prop="purchaseUnityName" width="110" sortable></el-table-column>
				<el-table-column label="订单类型" prop="storageOrderTypeDesc" width="110" sortable></el-table-column>
				<el-table-column label="订单编号" prop="purchaseOrderCode" width="160" sortable>
					<template #default="scope">
						{{scope.row.storageOrderType==0?scope.row.purchaseOrderCode:''}}
						{{scope.row.storageOrderType==1?scope.row.afterOrderCode:''}}
						{{scope.row.storageOrderType==2?scope.row.recoveryCode:''}}
						<!-- <div class="goto" @click="goTo">{{ scope.row.purchaseOrderCode }}</div> -->
					</template>
				</el-table-column>

				<!-- <el-table-column label="关联采购订单" prop="purchaseOrderCode" width="200">
					<template #default="scope">
						<div class="goto" @click="goTo">{{ scope.row.purchaseOrderCode }}</div>
					</template>
				</el-table-column> -->
				<el-table-column label="物料编码" prop="materialCode" width="110" sortable></el-table-column>
				<el-table-column label="物料名称" prop="materialName" width="140" sortable></el-table-column>
				<el-table-column label="规格型号" prop="materialSpecs" width="110" sortable></el-table-column>
				<el-table-column label="单位" prop="unitName" width="60"></el-table-column>
				<el-table-column label="接单数量" width="90">
					<template #default="scope">
						{{scope.row.storageOrderType==0?scope.row.purchaseQty:''}}
						{{scope.row.storageOrderType==1?scope.row.confirmQty:''}}
						{{scope.row.storageOrderType==2?scope.row.recoveryCount:''}}
						<!-- <div class="goto" @click="goTo">{{ scope.row.purchaseOrderCode }}</div> -->
					</template>
				</el-table-column>
				<el-table-column label="结算数量" prop="qty" width="110" sortable></el-table-column>
				<!-- <el-table-column label="采购数量" prop="purchaseQty" width="100"></el-table-column> -->
				<el-table-column label="差异" prop="diffQty" width="80" sortable>
					<template #default="scope">
						<span style="color:red">{{ scope.row.diffQty }}</span>
					</template>
				</el-table-column>
				<el-table-column label="接单单价" prop="purchasePrice" width="110" sortable>
					<template #default="scope">
						{{scope.row.storageOrderType==0?scope.row.purchasePrice:''}}
						{{scope.row.storageOrderType==1?scope.row.purchasePrice:''}}
						{{scope.row.storageOrderType==2?scope.row.resupplierPrice:''}}
						<!-- <div class="goto" @click="goTo">{{ scope.row.purchaseOrderCode }}</div> -->
					</template>
				</el-table-column>
				<el-table-column label="结算单价" prop="price" width="110" sortable></el-table-column>
		<!-- 		<el-table-column label="采购单价" prop="purchasePrice" width="100"></el-table-column> -->
				<el-table-column label="差异" prop="diffPrice" width="80" sortable>
					<template #default="scope">
						<span style="color:red">{{ scope.row.diffPrice }}</span>
					</template>
				</el-table-column>

			</scTable>

		</el-main>

		<!-- 供应商 -->
		<el-main class="nopadding" v-if="orgType == 3">
			<scTable ref="mytable" :span-method="objectSpanMethod" border :queryType="'storage-order-account/checkResult'"
				:data="listData" :queryList="queryList" :column="columnList" :orderList="OrderList"
				:sort-orders="['ascending', 'descending']" @selection-change="selectionChange"
				row-key="ReceivingOrderId" key="ReceivingOrderId"  :row-class-name="setRowClass" show-summary remoteSummary>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="序号" type="index" width="80"></el-table-column>
				<el-table-column label="对账申请编号" prop="storageOrderAccountCode" width="200" sortable></el-table-column>
				<el-table-column label="对账时间" prop="accountStartDate" width="200" sortable>
					<!-- <template #default="scope">
						<div>{{ scope.row.accountStartDate }} - {{ scope.row.accountEndDate }}</div>
					</template> -->
					<template #default="scope">
						{{scope.row.accountStartDate? scope.row.accountStartDate.slice(0, 10):scope.row.accountStartDate}}
						{{'-'}}
						{{scope.row.accountEndDate? scope.row.accountEndDate.slice(0, 10):scope.row.accountEndDate}}
					</template>
				</el-table-column>

				<el-table-column label="对账申请日期" prop="createTime" width="200" sortable></el-table-column>
				<el-table-column label="门店" prop="storeName" width="140" sortable></el-table-column>
				<el-table-column label="对账单位" prop="purchaseUnityName" width="110" sortable></el-table-column>
				<!-- <el-table-column label="供应商" prop="supplierFullName" width="200"></el-table-column> -->
				<el-table-column label="订单类型" prop="storageOrderTypeDesc" width="110" sortable></el-table-column>
				<el-table-column label="订单编号" prop="purchaseOrderCode" width="160" sortable>
					<template #default="scope">
						{{scope.row.storageOrderType==0?scope.row.purchaseOrderCode:''}}
						{{scope.row.storageOrderType==1?scope.row.afterOrderCode:''}}
						{{scope.row.storageOrderType==2?scope.row.recoveryCode:''}}
						<!-- <div class="goto" @click="goTo">{{ scope.row.purchaseOrderCode }}</div> -->
					</template>
				</el-table-column>
				<el-table-column label="物料编码" prop="materialCode" width="110" sortable></el-table-column>
				<el-table-column label="物料名称" prop="materialName" width="140" sortable></el-table-column>
				<el-table-column label="规格型号" prop="materialSpecs" width="110" sortable></el-table-column>
				<el-table-column label="单位" prop="unitName" width="60"></el-table-column>
				<el-table-column label="下单数量" width="110" sortable>
					<template #default="scope">
						{{scope.row.storageOrderType==0?scope.row.purchaseQty:''}}
						{{scope.row.storageOrderType==1?scope.row.confirmQty:''}}
						{{scope.row.storageOrderType==2?scope.row.recoveryCount:''}}
						<!-- <div class="goto" @click="goTo">{{ scope.row.purchaseOrderCode }}</div> -->
					</template>
				</el-table-column>
				<el-table-column label="结算数量" prop="qty" width="110" sortable></el-table-column>

				<el-table-column label="差异" prop="diffQty" width="110" sortable>
					<template #default="scope">
						<span style="color:red">{{ scope.row.diffQty }}</span>
					</template>
				</el-table-column>
				<el-table-column label="下单单价" prop="purchasePrice" width="110" sortable>
					<template #default="scope">
						{{scope.row.storageOrderType==0?scope.row.purchasePrice:''}}
						{{scope.row.storageOrderType==1?scope.row.purchasePrice:''}}
						{{scope.row.storageOrderType==2?scope.row.resupplierPrice:''}}
						<!-- <div class="goto" @click="goTo">{{ scope.row.purchaseOrderCode }}</div> -->
					</template>
				</el-table-column>
				<el-table-column label="结算单价" prop="price" width="110" sortable></el-table-column>

				<el-table-column label="差异" prop="diffPrice" width="110" sortable>
					<template #default="scope">
						<span style="color:red">{{ scope.row.diffPrice }}</span>
					</template>
				</el-table-column>
			</scTable>

		</el-main>
	</el-container>
</template>

<script>
	import publicjs from "@/api/model/publicjs";
	import tool from "@/utils/tool";
	import printDialog from "./components/print"
	import checkDialog from "./components/check"
	export default {
		components: {
			publicjs,
			printDialog,
			checkDialog
		},
		data() {
			return {
				orgType: '',
				columnList: [],
				queryList: {},
				selectionRows: [],
				materialTypeTree:[],
				showCondition: false,
				columnIndex0: '',
				columnIndex17: '',
				columnIndex15: '',
				dialogPrint: false,
				dialogCheck: false,
				listData:[],
				storeOrderTypeList: [{
						value: 0,
						label: "采购订单",
					},
					{
						value: 1,
						label: "退货订单",
					},
					{
						value: 2,
						label: "空瓶订单",
					}
				],
				defaultTime:[
					new Date(2000, 1, 1, 0, 0, 0),
					new Date(2000, 2, 1, 23, 59, 59),
				]
			}
		},
		methods: {
			async opBindData() {
				this.$refs.mytable.clearSort();
				this.$refs.mytable.getData();
			},
			resetSearch(){
				this.queryList={}
			},
			setRowClass({ row }) {
            if (this.selectionRows.includes(row)) {
                return "selected-row-color";
            }
            return "";
    },
			//表格选择后回调事件
			selectionChange(selection) {
				this.selectionRows = selection;
				console.log(this.selectionRows)
			},
			//核对
			opCheck(row) {
				this.dialogCheck = true;
				this.$nextTick(() => {
					this.$refs.checkDialog.setData(row);
					this.$refs.checkDialog.open("Check");
				});
			},
			opPrintview(row) {
				this.dialogPrint = true;
				this.$nextTick(() => {
					var arr = [];
					arr.push(row);
					this.$refs.printDialog.setData(arr);
					this.$refs.printDialog.open("Show");
				});

			},
			//查看
			opShow(row) {
				this.dialogCheck = true;
				this.$nextTick(() => {
					this.$refs.checkDialog.setData(row);
					this.$refs.checkDialog.open("Show");
				});
			},
			allprintview() {

				if (this.selectionRows.length > 0) {
					this.dialogPrint = true;
					let uniqueArr = this.selectionRows.filter((item, index, self) =>
						index === self.findIndex((t) => t.receivingOrderId === item.receivingOrderId)
					);
					this.$nextTick(() => {
						this.$refs.printDialog.setData(uniqueArr);
						this.$refs.printDialog.open("Show");
					});
				} else {
					this.$message.error("请选择要打印的数据");
				}

			},
			goTo(){
				// 跳转地址按要求更换
				// this.$router.push({ path: '/apply/order', query: { id: 123 } });
			},
			async onInit(){
				console.log(11);
				try {
					var returnValue = await this.$API.auth.PostProcessApi.post(
						"storage-order-account/checkResult",
						this.queryList
					);
					if (returnValue.status == 200) {
							this.listData = returnValue.response.data
						} else {
							this.$message.error("操作失败:" + returnValue.msg);
						}
				} catch (error) {
					this.loading = false;
					return false;
				}

				try {
					var returnValue = await this.$API.auth.PostProcessApi.post(
						"material-type/tree",
						{ status: 1 }
					);
					if (returnValue.status == 200) {
						this.materialTypeTree = returnValue.response;
					} else {
						this.$message.error("操作失败:" + returnValue.msg);
					}
				} catch (error) {
					this.loading = false;
					return false;
				}
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {

			}
		},
		async mounted() {
			this.orgType = tool.data.get("USER_INFO").AccountType;
			await this.onInit();
		},
	}
</script>


<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
.goto{
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}

::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
</style>
